﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
    <link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="Content/ui.textbox.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
    <link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="Scripts/ui.textbox.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>
<!-- InstanceBeginEditable name="pageStyles" -->
<style type="text/css">
    .message
    {
        clear: both;
        margin-bottom: 40px;
    }
    div.message div.avatar
    {
        float: left;
        width: 55px;
    }
    div.message div.meta
    {
        color: #666666;
        font-size: 10px;
        margin: 5px 0;
    }
    
    div.message h1 a.needConfirm
    {
        color: red;
        text-decoration: none;
        font-size: 18px;
    }
    
    div.message h1 a.notNeedConfirm
    {
        color: #000000;
        text-decoration: none;
        font-size: 18px;
    }
    div.message div.content
    {
        margin-left: 65px;
    }
    div.formatted_text_body.rich_text
    {
        margin-bottom: 10px;
    }
    
    div.formatted_text_body
    {
        font-size: 13px;
        line-height: 1.425em;
    }
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="pageScripts" -->
<script src="Scripts/jquery.quickpaginate.js" type="text/javascript"></script>
<script type="text/javascript">
    //************* URL常量
    var URL_MESSAGE_SHOWMESSAGE = "";
    var URL_MESSAGE_INBOX = "";
    //************* 全局变量
    var g_Var = {
        "messageTable": null

    };
    //************* 常量定义
    var StaticResource = {
        "hasConfirmed": {
            "true": "已确认",
            "false": "未确认"
        }
    };

    //************* Accessor访问器
    var EzAccessor = {};

    if (ezmock.IS_MOCKED) {
        var mock_json =
	        [{
	            "MessageId": "33333",
	            "NeedConfirm": true,
	            "HasConfirmed": true,
	            "SendUser": {
	                "Id": "33333",
	                "Name": "加菲盐",
	                "UserName": "yuxin",
	                "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

	            },
	            "CreateOn": "1348423559",
	            "MessageTitle": "",
	            "MemberString": null,
	            "MessageText": '8月的尾巴了。2010年3月，美丽开始做DOTA的解说，4月，慢慢进入大家的视线。'
	        },
            {
                "MessageId": "44444",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "SendUser": {
                    "Id": "33333",
                    "Name": "何静",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "MessageTitle": "发牢骚",
                "MemberString": null,
                "MessageText": '普不普通话一点都不重要~有风格就行了，口音也算是一种风格了。'
            },
            {
                "MessageId": "55555",
                "NeedConfirm": true,
                "HasConfirmed": false,
                "SendUser": {
                    "Id": "33333",
                    "Name": "张璐",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "MessageTitle": "",
                "MemberString": null,
                "MessageText": '支持。口音也算是一种风格了'
            }, {
                "MessageId": "55555",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "SendUser": {
                    "Id": "33333",
                    "Name": "张璐",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "MessageTitle": "支持",
                "MemberString": null,
                "MessageText": '支持。口音也算是一种风格了'
            }, {
                "MessageId": "55555",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "SendUser": {
                    "Id": "33333",
                    "Name": "张璐",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "MessageTitle": "",
                "MemberString": null,
                "MessageText": '支持。口音也算是一种风格了'
            }];

        var mockEzAccessor = {
            'getMessageList': function () {
                return mock_json;
            },
            'getCurrentUser': function () {

            },
            'doShowMessage': function (messageId) {
                alert("查看消息" + messageId);
            }
        };
        EzAccessor = mockEzAccessor;
    } else {
        var realEzAccessor = {
            'getMessageList': function () {
                //return  <%= ViewData["Inbox"] %>;
            },
            'getCurrentUser': function () {
                //return <%= ViewData["CurrentUser"] %>;
            },
            'doShowMessage': function (messageId) {
                window.location.href = "show?TopicId=" + messageId;
            }
        };
        EzAccessor = realEzAccessor;
    }



    function quickPage() {
        $("#cmbInBox .message").quickpaginate({ perpage: 3, showcounter: true, pager: $("#pageCount") });
    }

    function bindInboxMessageList(messageList) {
        if (messageList.length != 0) {
            var messageInboxDom = $('<div id="cmbInBox"></div>');

            for (var key in messageList) {
                //发送者头像
                var avatarDom = '<div class="avatar"><img src="/core/headicon/{userId}" style="width:54px;heigth:54px;"></img></div>';
                avatarDom = avatarDom.replace("{userId}", userId);

                //发送者发送时间
                var senderName = messageList[key].Sender.Name;
                var time = Date.fromEpoch(messageList[key].CreateOn);
                var createOn = time.toChineseDateFormat() + " " + time.toFullTimeFormat();

                var senderDom = '<div class="meta"><a>{senderName}</a> {createOn}</div>';
                senderDom = senderDom.replace("{senderName}", senderName)
                                 .replace("{createOn}", createOn);

                //消息标题
                var title = messageList[key].MessageTitle;
                if (title.length == 0) {
                    title = "无标题";
                }
                var titleDom = '<h1><a class="{titleClass}" onclick="readMessage(\'{topicId}\')">{title}</a></h1>';
                titleDom = titleDom.replace("{topicId}", messageList[key].MessageId)
                                     .replace("{title}", title);

                //是否需要确认
                var isNeedConfirm = messageList[key].NeedConfirm;
                if (isNeedConfirm == true) {
                    titleDom = titleDom.replace("{titleClass}", "needConfirm");
                } else {
                    titleDom = titleDom.replace("{titleClass}", "notNeedConfirm");
                }

                //是否已经确认
                var hasConfirmedDom = null;
                if (isNeedConfirm == true) {
                    var hasConfirmed = messageList[key].HasConfirmed;
                    hasConfirmedDom = '<span>({hasConfirmed})</span>';
                    if (hasConfirmed == true) {
                        hasConfirmedDom = hasConfirmedDom.replace("{hasConfirmed}", StaticResource.hasConfirmed['true']);
                    } else {
                        hasConfirmedDom = hasConfirmedDom.replace("{hasConfirmed}", StaticResource.hasConfirmed['false']);
                    }
                }

                //消息内容
                var content = messageList[key].MessageText;
                //todo:
                //做删减处理
                var contentDom = '<div class="formatted_text_body"><div>{content}</div></div>';
                contentDom = contentDom.replace("{content}", content);

                //消息链接
                var aLinkDom = '<a onclick="readMessage(\'{topicId}\')";>详细</a>';
                aLinkDom = aLinkDom.replace("{topicId}", messageList[key].MessageId);

                var messageDom = $('<div class="content"></div>');
                var tableDom = $('<div class="message"></div>');

                $(messageDom).append(senderDom)
                             .append(titleDom)
                             .append(contentDom)
                             .append(aLinkDom)
                             .append(hasConfirmedDom);

                $(tableDom).append(avatarDom)
                           .append(messageDom);

                $(messageInboxDom).append(tableDom);
            }

            $('#messageInbox').append(messageInboxDom);
        }
        else {
            var noMessageDom = '<div style="text-align:center">没有消息</div>';
            $('#messageInbox').append(noMessageDom);
        }

    }

    function readMessage(id) {
        EzAccessor.doShowMessage(id);
    }

    function deleMessage(id) {
        //增添tips
        var deletInfo = '<p>你确定要删除这条消息吗？</p><input type="button" id="delete" value="删除"/><input type="button" id="cancel" value="取消"/>';

        //去除已有的tips
        $('.tip-yellow').remove();

        $('#' + id).poshytip({
            content: deletInfo,
            showOn: 'focus',
            alignTo: 'target',
            alignX: 'left',
            alignY: 'center',
            offsetX: 5
        });

        $('#' + id).poshytip('show');

        //取消删除
        $('#cancel').click(function () {
            $('.tip-yellow').remove();

        });

        //确定删除
        $('#delete').click(function () {
            $('.tip-yellow').remove();

            var messageTr = $('#' + id).parent().parent();
            var position = g_Var['messageTable'].fnGetPosition(messageTr[0]);
            g_Var['messageTable'].fnDeleteRow(position);

        })

    }

    function initPage() {
        EzTipsManager.addTipBox('#tip_Remind', 'tipRemind');
        EzTipsManager.addTipBox('#tip_outbox', 'tipOutBox');
        EzTipsManager.showTipBox('tipRemind');
        EzTipsManager.showTipBox('tipOutBox');

        var messageList = EzAccessor.getMessageList();
        bindInboxMessageList(messageList);
        quickPage();
    }

    function initPageEvent() {
        $('#outbox').click(function () {
            window.location.href = "/message/outbox";
        });

    }


    $(function () {
        initPage();
        initPageEvent();
    });
</script>
<!-- InstanceEndEditable -->
<body>
    <div id="root">
        <div id="headw">
            <div id="head">
                <!-- InstanceBeginEditable name="pageHead" -->
                <p>
                    早上好，杨裕欣(软件工程部)
                </p>
                <div id="status-bar">
                    <span><a href="#">设置</a></span>&nbsp; 魏玛软件出品
                </div>
                <!-- InstanceEndEditable -->
            </div>
        </div>
        <div id="main">
            <div id="contentw">
                <div id="content-page">
                    <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <img src="Content/icons/message_inbox.png" style="width: 48px; height: 48px;" alt="outbox" />
                        <span>我收到的消息</span>
                    </div>
                    <div id="page-body">
                        <div id="messageInbox">
                        </div>
                    </div>
                    <div class="page-submit">
                        <div id="pageCount">
                        </div>
                    </div>
                    <!-- InstanceEndEditable -->
                </div>
                <div id="content-foot">
                    <small>这个是内容下面的脚注</small></div>
            </div>
            <div id="tipsw">
                <!-- InstanceBeginEditable name="pageShortcut" -->
                <div id="shortcuts" class="box">
                    <a class="btn-shortcut" href="/message/send">写新消息</a>
                </div>
                <!-- InstanceEndEditable -->
                <div id="tips" class="box">
                </div>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
            标题为红色的消息，说明该消息的发送者希望您查阅过该消息后，予以确认。请及时查阅并确认您需要确认的消息！
        </p>
    </div>
    <div id="tip_outbox" style="display: none;">
        <h1>
            <img src="Content/icons/message_outbox.png" style="width: 48px; height: 48px;" alt="inbox" /><a
                id="outbox">我发出的消息</a>
        </h1>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
